<template>
  <!-- svg:图标外层容器节点，内部需要与use标签结合使用  -->
  <svg :style="{ width: size, height: size }">
    <!-- xlink:href -->
    <use
      :xlink:href="prefix + name"
      :fill="color"
    />
  </svg>
</template>

<script setup lang="ts">
// 接收父组件传递过来的参数
defineProps({
  // xlink:href 前缀
  // 默认值：#icon-
  prefix: {
    type: String,
    default: '#icon-',
  },
  // 图标名称
  name: {
    type: String,
    default: '',
    required: true,
    validator: (val: string) => {
      // 图标名称不能为空
      return val !== '';
    },
  },
  // 图标颜色
  // 默认值：空字符串
  color: {
    type: String,
    default: '',
  },
  // 图标大小
  // 默认值：16px
  size: {
    type: String,
    default: '16px',
  },
});
</script>

<style scoped lang="scss"></style>
